<template>
  <div :style="{width: '600px', height: '50px'}"/>
  <div id="main_RedisNodeHot" :style="{width: '600px', height: '300px'}"/>
</template>

<script>
import * as echarts from 'echarts';



export default {
  name: "RedisNodeHot",
  mounted() {
    const chartDom = document.getElementById('main_RedisNodeHot');
    const myChart = echarts.init(chartDom);
    let option;

    var xAxisData = [];
    var data1 = [];
    for (var i = 0; i < 24; i++) {
      xAxisData.push(i + 'h');
      data1.push((Math.sin(i / 5) * (i / 10) + i / 6) * 5);
    }
    option = {
      title: {
        text: '24h 调用次数'
      },
      legend: {
        data: ['click']
      },
      toolbox: {
        // y: 'bottom',

      },
      tooltip: {},
      xAxis: {
        data: xAxisData,
        splitLine: {
          show: false
        }
      },
      yAxis: {},
      series: [
        {
          name: 'click',
          type: 'bar',
          data: data1,
          emphasis: {
            focus: 'series'
          }
        }
      ],
      animationEasing: 'elasticOut'
    };

    option && myChart.setOption(option);
  }
}
</script>

<style scoped>

</style>